import React, {
    Component,
    PropTypes
} from 'react';

export default class Footer extends Component {

    renderFilter(name, filter) {
        if (filter === this.props.visibilityFilter) {
            return (
                <li><a href="#" onClick={(e)=>this.handleClick(e, filter)} className="selected">{name}</a></li>
            )
        }
        return (<li><a href="#" onClick={(e)=>this.handleClick(e, filter)}>{name}</a></li>)
    }

    render() {
        const {
            visibleTodosCount
        } = this.props;
        if (!visibleTodosCount) {
            return (<div></div>);
        }
        return (
            <footer className="footer">
                <span className="todo-count">
                    {visibleTodosCount} items left
                </span>
                <ul className="filters">
                    {this.renderFilter('All', 'SHOW_ALL')}
                    {this.renderFilter('Active', 'SHOW_ACTIVE')}
                    {this.renderFilter('Completed', 'SHOW_COMPLETED')}
                </ul>
            </footer>
        );
    }

    handleClick(e, filter) {
        this.props.onChangeFilter(filter);
        return false;
    }
}

Footer.propTypes = {
    onChangeFilter: PropTypes.func.isRequired
}